Part1: 今日目標

1.前言
2.內容
3.提問
4.參考連結

Part2: 今日內容

1.前言

2.內容: Part_3: User interface, Widget catalog

Section_5. Basics

這個網頁是關於 Flutter 的基礎部件（Widgets），說明如下:

• 工具欄（Toolbar）
  包含其他部件，例如 TabBar、FlexibleSpaceBar。

• 垂直方向的子部件列表（Vertical List of Child Widgets）
  在垂直方向上排列子部件。

• 方便部件（Convenience Widget）
  結合了常見的繪畫、定位和尺寸部件。

• Material Design 高程按鈕（Elevated Button）
  按下時，其材料會升高的填充按鈕。

• 其他: Flutter Logo、Material Design 圖標（Icon）、圖像部件（Image Widget）、占位方塊（Placeholder Box）、在水平方向上排列子部件、基礎 Material Design 視覺布局結構（Basic Material Design Visual Layout Structure）和文本（Text）。

其中筆者感興趣了解的 class 說明如下:
(1) Scaffold class

• 基礎 Material Design 視覺布局結構（Basic Material Design Visual Layout Structure）

  • 提供顯示抽屜（drawers）和底部表單（bottom sheets）的 API。

• Scaffold Layout、鍵盤和顯示“凹口”（Notches）

  • Scaffold 會擴展以填充可用空間，通常會佔據整個窗口或設備螢幕。
  • 當設備的鍵盤出現時，Scaffold 的祖先 MediaQuery 小部件的 MediaQueryData.viewInsets 會改變，並且 Scaffold 會被重建。
  • MediaQueryData.padding 值定義了可能不完全可見的區域，例如 iPhone X 上的顯示“凹口”。
  • 可以在 scaffold 的 body 中使用 SafeArea 小部件來避免像顯示凹口這樣的區域。

• 具有可拖動滾動底部表單的浮動操作按鈕（Floating Action Button with a Draggable Scrollable Bottom Sheet）

  • 如果 Scaffold.bottomSheet 是一個 DraggableScrollableSheet，並且底部表單被拖動以覆蓋 Scaffold 高度的超過 70%，則兩件事會同時發生：
    • Scaffold 開始顯示 scrim（參見 ScaffoldState.showBodyScrim）。
    • Scaffold.floatingActionButton 通過一個 Curves.easeIn 的動畫縮小，並在底部表單覆蓋整個 Scaffold 時消失。

• 問題排查（Troubleshooting）

  • 嵌套的 Scaffolds（Nested Scaffolds）
  • Scaffold 被設計為 MaterialApp 的頂級容器。
  • 雖然有一些使用情況，例如顯示嵌入式 flutter 內容的演示應用，其中嵌套 scaffolds 是適當的，但最好是避免嵌套 scaffolds。
    Question: 更詳細的說明? Ans: 在開發 Flutter 應用時，Scaffold 是一個非常重要的部件，它提供了基礎的視覺結構，包括抽屜、浮動按鈕、底部導航欄等。Scaffold 通常被設計為 MaterialApp 的頂級容器，這意味著它應該是應用中的最外層部件。
    • 嵌套的 Scaffolds
      嵌套的 Scaffold 指的是一個 Scaffold 部件內部還包含另一個 Scaffold 部件。這種情況通常是不建議的，因為它可能會導致一些不可預見的行為和 UI 問題。
    • 舉例說明
      假設您正在開發一個具有多個標籤的應用，每個標籤都有不同的內容。一種常見的錯誤做法是為每個標籤視圖都創建一個新的 Scaffold。這會導致每個標籤都有自己的抽屜和底部導航欄，這通常不是我們想要的行為。

    TabBarView(
      children: <Widget>[
        Scaffold( // 嵌套的 Scaffold
          appBar: AppBar(
            title: Text('Tab 1'),
          ),
          body: ...
        ),
        Scaffold( // 嵌套的 Scaffold
          appBar: AppBar(
            title: Text('Tab 2'),
          ),
          body: ...
        ),
      ],
    )
    

    • 正確做法
      正確的做法是只在應用的最頂層使用一個 Scaffold，並根據當前選擇的標籤來更改 Scaffold 的內容。

    Scaffold(
      appBar: AppBar(
        title: Text('Selected Tab Title'),
      ),
      body: TabBarView(
        children: <Widget>[
          // 不包含 Scaffold 的部件
          Tab1Content(),
          Tab2Content(),
        ],
      ),
    )
    

    • 總結
      雖然 Flutter 是非常靈活的，並允許開發人員以各種方式構建 UI，但遵循最佳實踐來避免不必要的問題是很重要的。在大多數情況下，避免使用嵌套的 Scaffold 並確保 Scaffold 作為頂級容器是一個好的做法。

(2) Placeholder class
在開發階段特別有用，當開發人員需要快速搭建界面結構，但具體的內容部件尚未準備好時，可以使用 Placeholder 作為臨時的佔位符。

• 功能
  Placeholder 是一個部件，它會繪製一個方塊，代表將來會添加其他部件的位置。

• 用途
  在開發過程中，這個部件很有用，用於指示界面尚未完成。

• 尺寸

  • 默認情況下，Placeholder 的大小會適應其容器。
  • 如果 Placeholder 處於無界空間中，它會根據給定的 fallbackWidth 和 fallbackHeight 設定自己的大小。

Question: 舉例說明? Ans: 舉例，假設您正在構建一個包含圖像和文字的界面，但是圖像部件尚未準備好，您可以使用 Placeholder 部件來臨時替代。

在這個例子中，Placeholder 部件被用作圖像的臨時替代，它有一個藍色的邊框，並且設定了特定的高度和寬度。當圖像部件準備好時，可以簡單地替換掉 Placeholder 部件，將圖像部件放在相同的位置。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Placeholder Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用 Placeholder 部件作為圖像的臨時替代
              Placeholder(
                fallbackHeight: 100.0, // 設定高度
                fallbackWidth: 100.0, // 設定寬度
                color: Colors.blue, // 設定顏色
                strokeWidth: 2.0, // 設定邊框寬度
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'This is a Placeholder',
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Section_6. Cupertino (iOS-style) widgets

這個網頁是關於 Flutter 中的 Cupertino（iOS 風格）部件。這些部件都遵循當前的 iOS 設計語言，用於創建具有 iOS 風格的用戶界面。

• CupertinoActionSheet: iOS 風格的模態底部操作表，用於在多個選項之間選擇。

• CupertinoActivityIndicator: iOS 風格的活動指示器。顯示一個圓形的 'spinner'。

• CupertinoAlertDialog: iOS 風格的警告對話框。

• CupertinoButton: iOS 風格的按鈕。

• CupertinoContextMenu: iOS 風格的全屏模態路由，長按子部件時打開。用於顯示與內容相關的操作。

• 其他: CupertinoDatePicker、CupertinoDialogAction、CupertinoFullscreenDialogTransition、CupertinoPageScaffold、CupertinoPicker等等。

其中筆者感興趣了解的 class 說明如下:
(1) CupertinoContextMenu class

• 功能
  這是一個全屏模態路由，當子部件被長按時會打開。

• 顯示內容
  當打開時，它會在一個大的全屏 Overlay 中顯示子部件，或者如果提供了 previewBuilder，則顯示由它返回的部件，並帶有由 actions 指定的一系列按鈕。
  子部件/預覽被放置在一個 Expanded 部件中，所以如果其大小是不受約束的，它會增長以填充 Overlay。

• 關閉方式
  它可以像其他 PopupRoute 一樣被關閉，例如通過點擊背景或通過調用 Navigator.pop(context)。
  與 PopupRoute 不同，它也可以通過向下滑動來關閉。

• previewBuilder 參數

  • 這個參數最常用於顯示與子部件略有不同的版本。
  • 例如，可以使用 previewBuilder 來圓角子部件的角並允許其寬高比擴展，類似於 iOS 上的照片應用。

• 範例

  • 這個類別提供了一個非常簡單的 CupertinoContextMenu 範例，用於 Flutter logo。長按它以打開。
  • 另一個範例顯示了一個類似的 CupertinoContextMenu，這次使用 builder 來為部件添加邊界半徑。

• 使用場景
  這個部件在需要提供額外操作選項，例如長按某個項目時顯示一個與該項目相關的菜單，時會非常有用。

Question: 為何須要有Cupertino(iOS-style)這個類別 widgets?
Ans: Cupertino (iOS-style) widgets 在 Flutter 中是為了模擬 iOS 的設計風格和交互模式而創建的。以下是為何需要有 Cupertino (iOS-style) 這個類別的 widgets 的一些原因：

1. 跨平台一致性
   Flutter 是一個跨平台的框架，允許開發者使用一套代碼基礎來開發 Android 和 iOS 應用。為了在 iOS 平台上提供原生般的體驗，Flutter 提供了 Cupertino widgets，這些 widgets 遵循 iOS 的設計語言。

2. 用戶體驗
   iOS 用戶習慣於 iOS 的操作方式和界面風格。使用 Cupertino widgets 可以確保 iOS 用戶得到熟悉且一致的用戶體驗，這對於用戶滿意度和用戶留存率至關重要。

3. 開發效率
   通過使用 Cupertino widgets，開發者可以快速地構建出遵循 iOS 設計原則的界面，而無需從頭開始自定義每一個部件和動畫效果，這大大提高了開發效率。

4. 保持更新
   Cupertino widgets 會隨著 Flutter 的更新而更新，以保持與最新的 iOS 設計語言和交互模式的一致性。這意味著開發者不需要花費額外的時間和精力來維護和更新他們的應用以適應新的設計趨勢。

5. 靈活性和擴展性
   雖然 Cupertino widgets 提供了一套預定義的 iOS 風格部件，但開發者仍然可以根據需要對其進行定制和擴展，以滿足特定的需求和品牌識別。
   總結
   有了 Cupertino (iOS-style) widgets，開發者可以更輕鬆地創建出在 iOS 平台上看起來和感覺都像原生應用的 Flutter 應用，從而提供更好的用戶體驗並滿足 iOS 用戶的期望。

3.提問

請搜尋此網頁: Question，即可查詢筆者在閱讀Flutter官方文件遇到的疑問和對應參考說明。

4.參考連結

• API 文檔 - Cupertino Library
  這個連結提供了 Cupertino Library 的 API 文檔，詳細列出了所有可用的 Cupertino widgets 和它們的屬性、方法。

• Flutter Material & Cupertino Widgets
  這篇文章主要介紹了 Flutter 中的 Material Widget 和 Cupertino Widget，並對這兩種基礎部件進行了比較。文章內容包括了這兩種部件的不同表現形式，每個部分都提供了相應的代碼片段，展示了如何在 Flutter 應用中實現這些部件。此外，文章還提供了官方 Flutter 文檔的連結，供讀者獲取更多詳細資訊。

別忘了答應自己要去的地方，無論有多難，有多遠
Don’t forget promised to go to your place, no matter how hard it is, how far is it.
今天下班要和同事一起吃美食逛街，接者就要開啟連假模式啦，好開心呀!!!